<template>
  <div class="app">
    <News>
      <!-- <template scope="{newsList}"> -->
      <!-- <template slot-scope="{newsList}"> -->
      <template v-slot:qisile="{newsList}">
        <ul>
          <li v-for="n in newsList" :key="n.id" :class={hot:n.isHot}>{{n.title}}</li>
        </ul>
      </template>
    </News>
  </div>
</template>

<script>
  import News from './components/News'

  export default {
    name:'App',
    components:{News},
  }
</script>

<style>
  .app {
    background-color: gray;
    padding: 20px;
    display: flex;
    justify-content: space-around;
  }
  img,video {
    width: 100%;
  }
  .hot {
    color: blue;
    background-image: linear-gradient(45deg,red,yellow,green);
  }
</style>